import React from 'react';
import {Form, Select, Card, Icon, Cascader, Button, Tag} from 'antd';
import axios from '../../components/Engineering/axios'
import debounce from 'lodash/debounce';

const {Option, OptGroup} = Select;
const {Item: FormItem} = Form;


class CascaderForm extends React.Component {
  state = {
    switchButtonResultSeparateText: '上海',
    streets: [],
    options: [
      {
        value: '广东',
        label: '广东',
        isLeaf: false, //动态加载功能，只要是数据中的参数isLeaf: false 就会触发 loadData 方法，从而在loadData方法中请求下一级数据
      },
      {
        value: '广州',
        label: '广州',
        isLeaf: true,
      },
    ],
    cascaderOptions: []
  };

  componentDidMount() {
    axios.ajax({url: '/area/tree', params: {}}).then(res => {
      res && this.setState({
        areaTree: res.content
      })
    })
  }


  render() {
    const {getFieldDecorator} = this.props.form
    const {selectedItems} = this.state;
    const children = [];
    const formItemLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 6},

      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 18},
      }
    }

    const options = [
      {
        value: '广东', label: '广东', customValue: '广西县', customName: '广西县',
        children: [{
          value: '广州', label: '广州', customValue: '南宁市', customName: '南宁市', 
          children: [
            {value: '海珠', label: '海珠', customValue: '海珠区', customName: '海珠区', code: 752100,disabled: true,},
            {value: '白云', label: '白云', customValue: '白云区', customName: '白云区', code: 543100},
          ],
        },
        ],
      },

      {
        value: '云南县', label: '云南县', customValue: '云南县', customName: '云南县',
        children: [{
          value: '保山市', label: '保山市', customValue: '保山市', customName: '保山市',
          children: [
            {value: '昌宁县', label: '昌宁县', customValue: '昌宁县', customName: '昌宁县', code: 453400,},
          ],
        },
        ],
      },
    ]


    return (
      <>
        <Form layout="horizontal" labelAlign="left">
          <FormItem label="1.省市区级联" {...formItemLayout}>
            {getFieldDecorator("省市区级联", {
              initialValue: ['广东', '广州', '海珠'],
            })(
              <Cascader defaultValue={['广东', '广州', '海珠']} options={options}
                        onChange={(e) => console.log(e)} placeholder="请选择"/>
            )}
          </FormItem>

          

          <FormItem label="2.默认值通过数组的方式指定" {...formItemLayout}>
            {getFieldDecorator("默认值通过数组的方式指定", {
              initialValue: ['广东', '广州', '海珠'],
            })(
                <Cascader defaultValue={['zhejiang', 'hangzhou', 'xihu']} options={options} onChange={(value)=> console.log(value)} />
            )}
          </FormItem>


          <FormItem label="3.切换按钮和结果分开" {...formItemLayout}>
            {getFieldDecorator("切换按钮和结果分开", {
              initialValue: ['广东', '广州', '海珠'],
            })(
              <>
                <Tag>{this.state.switchButtonResultSeparateText}</Tag>
                &nbsp;
                <Cascader options={options} onChange={(value, selectedOptions) =>
                  this.setState({switchButtonResultSeparateText: selectedOptions.map(o => o.label).join(' - '),})
                }>
                  <a href="#">改变城市</a>
                </Cascader>
              </>
            )}
          </FormItem>



          <FormItem label="4.选择即改变,交互允许只选中父级选项" {...formItemLayout}>
            {getFieldDecorator("选择即改变,交互允许只选中父级选项", {
              initialValue: ['广东', '广州', '海珠'],
            })(
              <Cascader options={options} onChange={(value) => console.log(value)} changeOnSelect/>
            )}
          </FormItem>


          <FormItem label="5.通过移入展开下级菜单，点击完成选择" {...formItemLayout}>
            {getFieldDecorator("通过移入展开下级菜单，点击完成选择", {
              initialValue: ['广东', '广州', '海珠'],
            })(
              <Cascader
                options={options}
                placeholder="请选择"
                expandTrigger="hover"
                displayRender={(label) => label[label.length - 1]} //todo kim-stamp只显示最新的项目
                onChange={(value) => console.log(value)}
              />,
            )}
          </FormItem>

          <FormItem label="6.不同大小的级联选择器" {...formItemLayout}>
            {getFieldDecorator("不同大小的级联选择器", {
              initialValue: ['广东', '广州', '海珠'],
            })(
            <>
              <Cascader size="large" options={options} onChange={(value) => console.log(value)} defaultValue={['广东', '广州', '海珠']} />
              <Cascader options={options} onChange={(value) => console.log(value)} defaultValue={['广东', '广州', '海珠']} />
              <Cascader size="small" options={options} onChange={(value) => console.log(value)} defaultValue={['广东', '广州', '海珠']} />
            </>
            )}
          </FormItem>




          <FormItem label="7.自定义已选项,例如给最后一项加上邮编链接" {...formItemLayout}>
            {getFieldDecorator("自定义已选项,例如最后项加邮编链接", {
              initialValue: ['广东', '广州', '海珠'],
            })(
              <Cascader
                size="large"
                options={options}
                defaultValue={['zhejiang', 'hangzhou', 'xihu']}
                displayRender={(labels, selectedOptions) =>
                  labels.map((item, i) => {
                    const option = selectedOptions[i];
                    if (i === labels.length - 1) {
                      return (
                        <span key={option.value}>
                          {item} (<a onClick={e => {
                          e.stopPropagation();
                          console.log('clicked', item, option);
                        }}>
                            {option.code}</a>)
                        </span>
                      );
                    }
                    return <span key={option.value}>{item} / </span>;
                  })}
                style={{width: '100%'}}
              />
            )}
          </FormItem>


          <FormItem label="8.搜索,可以直接搜索选项并选择" {...formItemLayout}>
            {getFieldDecorator("搜索,可以直接搜索选项并选择", {
              initialValue: ['广东', '广州', '海珠'],
            })(
              <Cascader
                size="large"
                options={options}
                defaultValue={['zhejiang', 'hangzhou', 'xihu']}
                showSearch={(inputValue, path) => path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)}
                displayRender={(labels, selectedOptions) =>
                  labels.map((item, i) => {
                    const option = selectedOptions[i];
                    if (i === labels.length - 1) {
                      return (
                        <span key={option.value}>
                          {item} (<a onClick={e => {
                          e.stopPropagation();
                          console.log('clicked', item, option);
                        }
                        }>{option.code}</a>)
                        </span>
                      );
                    }
                    return <span key={option.value}>{item} / </span>;
                  })}
                style={{width: '100%'}}
              />
            )}
          </FormItem>


          <FormItem label="9.自定义字段名" {...formItemLayout}>
            {getFieldDecorator("自定义字段名", {
              initialValue: ['广西县', '南宁市', '江南区'],
            })(
              <Cascader
                size="large"
                options={options}
                fieldNames={{label: 'customValue', value: 'customName'}}
                defaultValue={['zhejiang', 'hangzhou', 'xihu']}
                showSearch={(inputValue, path) => path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)}
                displayRender={(labels, selectedOptions) =>
                  labels.map((item, i) => {
                    const option = selectedOptions[i];
                    if (i === labels.length - 1) {
                      return (
                        <span key={option.value}>
                          {item} (<a onClick={e => {
                          e.stopPropagation();
                          console.log('clicked', item, option);
                        }
                        }>{option.code}</a>)
                        </span>
                      );
                    }
                    return <span key={option.value}>{item} / </span>;
                  })}
                style={{width: '100%'}}
              />
            )}
          </FormItem>


          <FormItem label="10.使用loadData实现『本地动态』加载选项" {...formItemLayout}>
            {getFieldDecorator("使用loadData实现『本地动态』加载选项", {
              initialValue: ['广西县', '南宁市', '江南区'],
            })(
              <Cascader
                options={this.state.options}
                loadData={selectedOptions => {
                  const targetOption = selectedOptions[selectedOptions.length - 1];
                  ;
                  targetOption.loading = true;

                  // 延迟加载选项
                  setTimeout(() => {
                    targetOption.loading = false;
                    targetOption.children = [
                      {
                        label: `${targetOption.label} 动态 1`,
                        value: '动态1',
                        children: [{}]
                      },
                      {
                        label: `${targetOption.label} 动态 2`,
                        value: '动态2',
                        children: []
                      },
                    ];
                    this.setState({options: [...this.state.options],});
                  }, 1000)
                }

                  // const targetOption = selectedOptions[selectedOptions.length - 2];


                }
                changeOnSelect
              />
            )}
          </FormItem>


          <FormItem label="11.使用loadData实现『远程动态』加载选项" {...formItemLayout}>
            {getFieldDecorator("使用loadData实现『远程动态』加载选项", {
              initialValue: ['广西县', '南宁市', '江南区'],
            })(
              <Cascader
                options={this.state.areaTree}
                loadData={selectedOptions => {
                  const targetOption = selectedOptions[selectedOptions.length - 1];
                  ;
                  targetOption.loading = true;
                  axios.ajax({
                    url: `/streets/${targetOption.value}`, params: {districtCode: targetOption.value}
                  }).then(res => {
                    targetOption.loading = false;
                    let streetsList = res.content
                    streetsList.map(item => {
                      item.label = item.streetsName;
                      item.value = item.streetsCode
                    })
                    targetOption.children = streetsList
                    this.setState({cascaderOptions: [...this.state.cascaderOptions],});
                  })
                }

                }
                onChange={(value, selectedOptions) => console.log(value, selectedOptions, "级联改变输出的值")}
                changeOnSelect
              />
            )}
          </FormItem>


          <Button onClick={() => {
            console.log(this.props.form.getFieldsValue())
          }}>确定</Button>
        </Form>
      </>
    );
  }
}

const WrappedCascaderForm = Form.create({name: 'CascaderForm'})(CascaderForm)

// export default props=> <>
// <Card title="搜索和远程数据结合">
// <WrappedCascaderForm placeholder="请输入要查询的信息" style={{ width: 200 }}  wrappedComponentRef={(form) => props.form = form} />
// </Card>
// </>

export default class WrappedSeart extends React.Component {
  render() {
    return <Card title="级联" style={{marginTop: 10}}>
      <WrappedCascaderForm placeholder="请输入要查询的信息" wrappedComponentRef={(form) => this.form = form}/>
    </Card>
  }
}


// API#
// <Cascader options={options} onChange={onChange} />
// 参数	                 说明	类型	默认值	版本
// allowClear	          是否支持清除	boolean	true
// autoFocus	          自动获取焦点	boolean	false
// changeOnSelect	      当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示	boolean	false
// className	          自定义类名	string	-
// defaultValue	        默认的选中项	string[]	[]
// disabled	            禁用	boolean	false
// displayRender	      选择后展示的渲染函数	(label, selectedOptions) => ReactNode	label => label.join(' / ')
// expandTrigger	      次级菜单的展开方式，可选 'click' 和 'hover'	string	'click'
// fieldNames	          自定义 options 中 label name children 的字段（注意，3.7.0 之前的版本为 filedNames）	object	{ label: 'label', value: 'value', children: 'children' }	3.7.0
// getPopupContainer	  菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。示例	Function(triggerNode)	() => document.body
// loadData	            用于动态加载选项，无法与 showSearch 一起使用	(selectedOptions) => void	-
// notFoundContent	    当下拉列表为空时显示的内容	string	'Not Found'
// options	            可选项数据源	Option[]	-
// placeholder	        输入框占位文本	string	'请选择'
// popupClassName	      自定义浮层类名	string	-
// popupPlacement	      浮层预设位置：bottomLeft bottomRight topLeft topRight	Enum	bottomLeft
// popupVisible	        控制浮层显隐	boolean	-
// showSearch	          在选择框中显示搜索框	boolean	false
// size	                输入框大小，可选 large default small	string	default
// style	              自定义样式	string	-
// suffixIcon	          自定义的选择框后缀图标	ReactNode	-	3.10.0
// value	              指定选中项	string[]	-
// onChange	            选择完成后的回调	(value, selectedOptions) => void	-
// onPopupVisibleChange	显示/隐藏浮层的回调	(value) => void	-
// showSearch           为对象时，其中的字段：

// 参数	                说明	类型	默认值	版本
// filter	              接收 inputValue path 两个参数，当 path 符合筛选条件时，应返回 true，反之则返回 false。	function(inputValue, path): boolean
// limit	              搜索结果展示数量	number | false	50	3.11.0
// matchInputWidth	    搜索结果列表是否与输入框同宽	boolean
// render	              用于渲染 filter 后的选项	function(inputValue, path): ReactNode
// sort	                用于排序 filter 后的选项	function(a, b, inputValue)

// Option#
// interface Option {
//   value: string;
//   label?: React.ReactNode;
//   disabled?: boolean;
//   children?: Option[];
// }

// 方法#
// 名称	               描述	版本
// blur()	             移除焦点
// focus()	           获取焦点
